forwardRef
🧑🏻💻 forwardRef
forwardRef
를 사용하면 컴포넌트가 ref를 사용하여 부모 컴포넌트에 DOM 노드를 노출할 수 있다.
✅ forwardRef 문법
const SomeComponent = forwardRef(render)
render
는 컴포넌트의 렌더링 함수이다.forwardRef
는ref
prop을 받을 수 있고 JSX에서 렌더링할 수 있는 React 컴포넌트를 반환한다.
🧑🏻💻 알고 가기
✅ forwardRef를 언제 사용해야 하는가?
- 부모 컴포넌트에 DOM 노드 노출할 때
- 노드로 스크롤하기, 노드에 focus 맞추기, 애니메이션 트리거하기, 비디오 재생 및 정지하기, 텍스트 선택하기 등 prop으로 표현할 수 없는 필수적인 동작에 쓸 때
✅ 주의 사항
- prop으로 무언가를 표현할 수 있다면 ref를 사용하지 말자. 예를 들어,
<Modal isOpen={isOpen} />
과 같이 propisOpen
을 사용할 수 있다면, 굳이{ open, close }
와 같은 명령형 핸들을 만들어ref
를 사용하지 말자. - ref를 과도하게 사용하지 말아야 한다.
- prop으로 무언가를 표현할 수 있다면 ref를 사용해서는 안된다.
🧑🏻💻 활용 및 생각할 거리
✅ 언제 사용해야 하는 가?
- 부모 컴포넌트에 DOM 노드 노출할 때
import { forwardRef } from 'react';
const MyInput = forwardRef(function MyInput(props, ref) {
const { label, ...otherProps } = props;
return (
<label>
{label}
<input {...otherProps} ref={ref} />
</label>
);
});
- forwardRef 선언해서 부모 노드에 DOM 노드를 노출 시킬 수 있다.
import { useRef } from 'react';
import MyInput from './MyInput.js';
export default function Form() {
const ref = useRef(null);
function handleClick() {
ref.current.focus();
}
return (
<form>
<MyInput label="Enter your name:" ref={ref} />
<button type="button" onClick={handleClick}>
Edit
</button>
</form>
);
}
- 부모 노드는 해당 DOM 노드를 조작할 수 있다.